<template>
	<view>
		<view class="pl20 pr20 mt40 jobitem pt32 pb40" @click="$jump('/pages/common/jobDetail/jobDetail')">
			<view class="flex row-between ">
				<view class="jobtit">后端中级工程师</view>
				<!-- salary -->
				<view class="salary">8千-1.3万</view>
			</view>
			<view class="flex mt36 mb32">
				<view class="w102 h40 jobitem-middle mr14">五险一金</view>
				<view class="w102 h40 jobitem-middle mr14">五险一金</view>
				<view class="w102 h40 jobitem-middle mr14">五险一金</view>
				<view class="w102 h40 jobitem-middle mr14">五险一金</view>
				<view class="w102 h40 jobitem-middle mr14">五险一金</view>
			</view>
			
			<view class="flex row-between col-center">
				<!-- 左边 -->
				<view class="w344">
					<u-line-progress active-color="#2979ff" :percent="70"></u-line-progress>
					<view class="flex row-between mt16">
						<text class="peopNum">已报名25人</text>
						<text class="peopNum">招聘40人</text>
					</view>
				</view>
				
				<!-- 右边 申请盒子 如过是我的申请页面就隐藏-->
				<view class="h54 w140 jobitem-btn" @click="btn">申请</view>
			</view>
			
			<!-- 分割线盒子  如果不是我的申请页面就隐藏 -->
			<view class="line"></view>
			<!-- //分割线盒子  如果不是我的申请页面就隐藏 -->
			
			<!-- 申请时间盒子  如果不是我的申请页面就隐藏 -->
			<view class="applytime">
				<text>申请时间：</text>
				<text class="applytimetxt">2021-05-31 16:25:42</text>
			</view>
			<!-- //申请时间盒子  如果不是我的申请页面就隐藏 -->
		</view>
		
		<view class="pl20 pr20 mt40 jobitem pt32 pb40" @click="$jump('/pages/common/jobDetail/jobDetail')">
			<view class="flex row-between ">
				<view class="jobtit">后端中级工程师</view>
				<!-- salary -->
				<view class="salary">8千-1.3万</view>
			</view>
			<view class="flex mt36 mb32">
				<view class="w102 h40 jobitem-middle mr14">五险一金</view>
				<view class="w102 h40 jobitem-middle mr14">五险一金</view>
				<view class="w102 h40 jobitem-middle mr14">五险一金</view>
				<view class="w102 h40 jobitem-middle mr14">五险一金</view>
				<view class="w102 h40 jobitem-middle mr14">五险一金</view>
			</view>
			
			<view class="flex row-between col-center">
				<!-- 左边 -->
				<view class="w344">
					<u-line-progress active-color="#2979ff" :percent="70"></u-line-progress>
					<view class="flex row-between mt16">
						<text class="peopNum">已报名25人</text>
						<text class="peopNum">招聘40人</text>
					</view>
				</view>
				
				<!-- 右边 申请盒子 如过是我的申请页面就隐藏-->
				<view class="h54 w140 jobitem-btn" @click="btn">申请</view>
			</view>
			
			<!-- 分割线盒子  如果不是我的申请页面就隐藏 -->
			<view class="line"></view>
			<!-- //分割线盒子  如果不是我的申请页面就隐藏 -->
			
			<!-- 申请时间盒子  如果不是我的申请页面就隐藏 -->
			<view class="applytime">
				<text>申请时间：</text>
				<text class="applytimetxt">2021-05-31 16:25:42</text>
			</view>
			<!-- //申请时间盒子  如果不是我的申请页面就隐藏 -->
		</view>
	</view>
</template>

<script>
	export default {
		name:"jobList",
		data() {
			return {
				
			};
		},
		methods: {
			btn() {
				console.log(1)
			}
		}
	}
</script>

<style lang="scss">
.jobitem {
		background: #FFFFFF;
		box-shadow: 0px 6rpx 20rpx 0px #E8EAEF;
		border-radius: 14rpx;
		.jobtit {
			font-size: 30rpx;
			color: #0C162E;
		}
		.jobitem-middle {
			text-align: center;
			line-height: 40rpx;
			background: #F1F3F5;
			border-radius: 6rpx;
			font-size: 22rpx;
			color: #6D788B;
		}
		.salary {
			font-size: 34rpx;
			color: #FF286A;
		}
		.peopNum {
			font-size: 22rpx;
			color: #6D788B;
		}
		.jobitem-btn {
			text-align: center;
			line-height: 54rpx;
			background: #1385FF;
			border-radius: 10rpx;
			color: #FFFFFF;
		}
	}
	.line {
		width: 100%;
		height: 2rpx;
		background: #D2DEEB;
		margin: 40rpx 0;
	}
	.applytime {
		text {
			font-size: 24rpx;
			font-weight: 500;
			color: #6D788B;
		}
		.applytimetxt {
			color: #0C162E;
		}
	}
</style>
